<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
	<style>
	    body {}
	    .avatar {
	        width: 90px;
	        height: 90px;
	        margin-left: 1em;
	        margin-top: 1em;
	        margin-right: 1em;
	        margin-bottom: 1em;
	    }
	</style>
</head>
<body>
	<div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item" >
                <div class="aui-list-item-inner">
                	<div class="aui-list-item-title aui-col-xs-9" onclick="changeAvatar()">头像</div>
                    <div class="aui-list-item-right aui-col-xs-3"><img id="avatar" class="avatar" onclick="openImg()"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                	<div class="aui-list-item-title">昵称</div>
                    <div class="aui-list-item-right" id="nickname"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                	<div class="aui-list-item-title">姓名</div>
                    <div class="aui-list-item-right" id="realname"></div>
                </div>
            </li>
           	<li class="aui-list-item aui-list-item-middle">
                <div class="aui-list-item-inner aui-list-item-arrow" onclick="changePhone()">
                	<div class="aui-list-item-title">手机号</div>
                    <div class="aui-list-item-right" id="phone"></div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow" onclick="changePassword()">
                    	修改密码
                </div>
            </li>
            <div id="bankcard">
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner aui-list-item-arrow" onclick="bankCard()">
		                	维护银行卡
		            </div>
		        </li>
            </div>
        </ul>
    </div>
	

</body>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
	var avatar = "widget://image/user/avatar.jpg";
	var photoBrowser;
	apiready = function(){
		require(["api","zepto","common"],function(){
			updateInfo();
			init();
		})
	};
	function updateInfo(){
		$zb.prefs.getPrefs('userInfo',function(result){
			if (result.value != "") {
				var userinfo = JSON.parse(result.value);
				$('#nickname').html(userinfo.nickname);
				$('#realname').html(userinfo.realname);
				var phone_show = userinfo.phone.substr(0,3)+'****'+userinfo.phone.substr(7);
				$('#phone').html(phone_show);
				api.imageCache({
                    url: $zb.getRes_temp(userinfo.avatar),
                    encode: false
                }, function(ret, err) {
                    if (ret.status === true) {
                        avatar = ret.url;
	                    $('#avatar').attr('src',avatar);
                    }
                });
			}
		})
	}
	function init(){
		$zb.prefs.getPrefs('userInfo',function(result){
			if (result.value != "") {
				var userinfo = JSON.parse(result.value);
				$('#nickname').html(userinfo.nickname);
				if(userinfo.usertype == $zb.usertype.USERTYPE_STUDENT){
					$('#bankcard').toggle();
				}
			}
		});
	}
	
	function changeAvatar(){
		api.getPicture({
		    sourceType: 2,
		    mediaValue: 'pic',
		    destinationType: 'url',
		    quality: 50,
		    targetWidth: 300,
		    targetHeight: 300,
		    encodingType: 'jpg',
		    allowEdit: true,
		    saveToPhotoAlbum: false
		}, function(resultpic, err){
		    if (resultpic) {
		    	if(resultpic.data==null||resultpic.data=='')
		    		return;
		        // ret.data 路径, ret.base64Data 图片
		        var local_url = resultpic.data;
		        $zb.prefs.getPrefs('token',function(resulttoken) {
		            if(resulttoken.value) {
	                    $zb.requestForData({values:{token:resulttoken.value},files:{image:local_url}}, 'user','uploadAvatar', function(result) {
		                    if (result.status == 'OK') {
		                      	$zb.prefs.getPrefs('userInfo',function(ret){
									if (ret.value != "") {
										var userinfo = JSON.parse(ret.value);
										userinfo.avatar = result.data.avatar;
										$zb.prefs.setPrefs('userInfo',userinfo);
										api.imageCache({
						                    url: $zb.getRes_temp(userinfo.avatar),
						                    encode: false
						                }, function(t, err) {
						                    if (t.status === true) {
							                    $('#avatar').attr('src',t.url);
							                    avatar = t.url
						                    }
							                api.execScript({
											    name: 'homepage_win',
											    frameName: 'frame4_user',
											    script: 'updateAvatar()'
											});
						                });
									}
								});
		                    } else {
		                        api.toast({ msg: result.status });
		                    }
		                });
		            }
	            });
	          }
         });
     }
	       
					
	
	function openImg(){
		photoBrowser = api.require('photoBrowser');
		api.execScript({
		    script: 'modifyFlag(true)'
		});

		photoBrowser.open({
		    images: [
		        avatar
		    ],
		    bgColor: '#000'
		}, function(ret, err) {
		    if (ret) {
		    	if(ret.eventType=='click'){
		    		photoBrowser.close();
		    	}
		    } 
		});
	}
	
	function closePhotoBrowser(){
		photoBrowser.close();
	}
	
	function changePhone(){
		api.openWin({
            name : 'change_phone',
            url : './change_phone.html',
            bounces : false,
        });
	}
	function changePassword(){
		api.openWin({
            name : 'change_password',
            url : './change_password.html',
            bounces : false,
        });
	}
	
	function bankCard(){
        api.openWin({
            name: 'bank_card',
            url: './bank_card.html',
            bounces : false,
        });
	}
</script>
</html>